<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<ng-container *ngIf="isMultipleSelected; else singleSelectedTpl">
    <div class="aui-gutter-column-lg">
        <lv-collapse [lvMultiExpansion]="'false'" lvType="simple">
            <lv-collapse-panel [lvTitle]="collapsePanelTitleTpl" [lvExpanded]="false">
                <lv-tabs [(lvActiveIndex)]="activeIndex" [lvBeforeChange]="beforeChange"
                    (lvActiveIndexChange)="indexChange($event)" class="host-register-tabs">
                    <lv-tab [lvTitle]="tabTotalTitleTpl" [lvId]="0">
                        <ng-template lv-tab-lazy>
                            <ng-container *ngTemplateOutlet="allTableTpl">
                            </ng-container>
                        </ng-template>
                    </lv-tab>
                    <lv-tab [lvTitle]="tabSelectedTitleTpl" [lvId]="1">
                        <ng-template lv-tab-lazy>
                            <ng-container *ngTemplateOutlet="selectedTableTpl">
                            </ng-container>
                        </ng-template>
                    </lv-tab>
                </lv-tabs>
            </lv-collapse-panel>
        </lv-collapse>
    </div>
</ng-container>

<ng-template #collapsePanelTitleTpl>
    <ng-container *ngTemplateOutlet="selectedTpl"></ng-container>
</ng-template>

<ng-template #singleSelectedTpl>
    <div class="aui-gutter-column-lg">
        <ng-container *ngTemplateOutlet="selectedTpl"></ng-container>
    </div>
</ng-template>

<ng-template #selectedTpl>
    <lv-group lvGutter="8px">
        <span class="aui-h3">{{ title }}</span>
        <span>
            <ng-container *ngIf="isMultipleSelected">
                {{selectedTableData.data?.length}}
            </ng-container>
            <ng-container *ngIf="!isMultipleSelected">
                {{resourceData.name}}
            </ng-container>
        </span>
    </lv-group>
</ng-template>


<ng-template #tabTotalTitleTpl>
    <div class="host-register-tabnav">
        <span>{{ 'common_total_label'|i18n }}</span>
        <span class="host-register-tabnav-num">{{ allTableData?.total }}</span>
    </div>
</ng-template>

<ng-template #tabSelectedTitleTpl>
    <div class="host-register-tabnav">
        <span>{{ 'common_selected_label'|i18n }}</span>
        <span class="host-register-tabnav-num">{{ selectedTableData.data?.length }}</span>
    </div>
</ng-template>

<ng-template #allTableTpl>
    <lv-pro-table #allTable [config]="allTableConfig" [data]="allTableData"></lv-pro-table>
</ng-template>

<ng-template #selectedTableTpl>
    <lv-pro-table #selectedTable [config]="selectedTableConfig" [data]="selectedTableData"></lv-pro-table>
</ng-template>